
<template>
   <div ref='container' style="height: 70vh; overflow: auto;">
   	<div style="height:2000px; width: 200px;">
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">1</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">2</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">3</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">4</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">5</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">6</div>
       <div style="height:200px;background-color:green;border: 7px solid #ccc;">7</div>

       <Sticky :container="container">
           <div style="height:300px;background-color:red;line-height:300px;text-align:center;font-size:30px;">
                8
           </div>
        </Sticky>
        <div style="height:200px;background-color:green;border: 7px solid #ccc;">9</div>
        <div style="height:200px;background-color:green;border: 7px solid #ccc;">10</div>
        <div style="height:200px;background-color:green;border: 7px solid #ccc;">11</div>
 		<div style="height:200px;background-color:green;border: 7px solid #ccc;">12</div>
 		<div style="height:200px;background-color:green;border: 7px solid #ccc;">13</div>
  </div>
   </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'

import Sticky from '../components/sticky.vue'

const container = ref()

onMounted(() => {
	console.log(container)
})


</script>

<style scoped>

</style>
